<script setup>
import { useStorage } from '@vueuse/core'
import { StorageSkinColor } from "@/utils/storages"
import zhCn from 'element-plus/dist/locale/zh-cn'

// 引入全局zindex
const zIndex = $Common.globalZindex

// 设置默认皮肤颜色
const skinColorStorage = useStorage(StorageSkinColor)
if (skinColorStorage.value) {
    $Common.mxSetDefaultPrimaryColor(skinColorStorage.value)
}
</script>

<template>
  <el-config-provider :zIndex="zIndex" :locale="zhCn">
    <div class="app-wrapper">
      <router-view></router-view>
    </div>
  </el-config-provider>
</template>

<style lang="scss">
#app {
  height: 100%;
  font-family: '微软雅黑','宋体',arial,'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  .app-wrapper {
    height: 100%;
  }
}
body {
  --el-header-height: 60px;
  --el-footer-height: 40px;
  a:hover {
    color: var(--el-color-primary);
  }
  .el-button+.el-button {
    margin-left: 5px!important
  }
  .el-button-group>.el-button+.el-button {
      margin-left: 0!important
  }
  .c-el-loading {
    color: var(--el-color-primary);
    .el-loading-spinner {
      .circular {
        width: 32px !important;
        height: 32px !important;
      }
    }
    .el-loading-text {
      color: var(--el-color-primary);
      font-size: 13px !important;
    }
  }
  .c-el-dialog {
    --el-dialog-width: 92%;
    --el-dialog-border-radius: var(--el-border-radius-base);
  }
  .el-input {
    font-size: 14px;
  }
  .c-el-input {
    width: 192px;
  }
  .el-footer {
    --el-footer-height: 40px;
  }
  // 可全局配置tips的样式
  .el-popper {
    max-width: 650px;
  }
  /* .el-popper.is-customized {
    padding: 6px 12px;
    // background: linear-gradient(180deg, var(--el-color-primary-light-3), var(--el-color-primary-light-7));
    color:  var(--el-color-white);
    background: var(--el-color-primary-light-3);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  }

  .el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, var(--el-color-primary-light-3), var(--el-color-primary-light-3));
    right: 0;
  } */
}
</style>
